@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3631103_yztr8wxsy3q.css);

@function getvw($w){
    @return ($w  /750)*100 + vw
}

.wrap{
    header{
        nav{
            display: flex;
            padding: getvw(17) getvw(23) getvw(9) getvw(23);
            align-items: center;
            justify-content: space-between;
            button{
                border: 1px solid #ff9344;
                border-radius: getvw(20);
                background-color: #fff;
                width: getvw(123);
                height: getvw(57);
            }
            .search{
                position: relative;
                input{
                    width: getvw(265);
                    height: getvw(50);
                    border: 1px solid #ff9344;
                    border-radius: getvw(50);
                    font-size: getvw(24);
                    padding: 0 getvw(25);
                }
                i{
                    font-size: getvw(30);
                    color:#ff9344;
                    position: absolute;
                    right: getvw(24);
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            .area{
                position: relative;
                bottom: getvw(10);
                .box{
                    position: relative;
                    bottom: getvw(-10);
                    left: getvw(40);
                    width: getvw(20);
                    height: getvw(20);
                    background-color: red;
                    color: #fff;
                    border-radius: 50%;
                    box-sizing: border-box;
                    font-size: .0267rem;
                    text-align: center;
                    display: flex;
                    align-items: center;
                }
                img{
                    width: getvw(62);
                    height: getvw(43);
                }
            }
        }
        .my{
            display: flex;
            justify-content: space-between;
            width: getvw(710);
            height: getvw(170);
            margin: 0 auto;
            .left{
                display: flex;
                img{
                    width: getvw(170);
                    height: getvw(170);
                }
                .left_in{
                    line-height: getvw(50);
                    margin-left: getvw(20);
                    width: getvw(155);
                    height: getvw(170);
                    font-size: .3867rem;
                    span{
                        color: #9d9d9d;
                        font-size: .3467rem;
                    }
                }
            }
            .right{
                font-size: 50px;
                display: flex;
                align-items: center;
            }
        }
    }
    main{
        .box{
            display: flex;
            justify-content: space-between;
            width: getvw(704);
            height: getvw(151);
            margin: 0 auto;
            margin-top: getvw(26);
            .boxone{
                width: getvw(195);
                height: getvw(151);
                background-color: #b2e0a0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img{
                    width: getvw(79);
                    height: getvw(82);
                }
                p{
                    font-size: .3467rem;
                }
            }
            .boxtwo{
                width: getvw(195);
                height: getvw(151);
                background-color: #a0dce0;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                img{
                    width: getvw(84);
                    height: getvw(80);
                }
                p{
                    font-size: .3467rem;
                }
            }
            .boxtree{
                width: getvw(195);
                height: getvw(151);
                background-color: #e0b7a0;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                img{
                    width: getvw(124);
                    height: getvw(81);
                }
                p{
                    font-size: .3467rem;
                }
            }
        }
        .nav{
            width: getvw(708);
            height: getvw(105);
            // background-color: pink;
            display: flex;
            margin: 0 auto;
            justify-content:space-between ;
            .left{
                display: flex;
                align-items: center;
                font-size: getvw(29);
                p{
                    font-family: "微软雅黑";
                    position: relative;
                    left: getvw(10);
                    
                }
                .yundong{
                    width: getvw(47);
                    height: getvw(58);
                }
                .dianying{
                    width: getvw(57);
                    height: getvw(74);
                }
                img{
                    width: getvw(57);
                    height: getvw(74);
                    
                }
            }
            .right{
                display: flex;
                align-items: center;
                font-size: .32rem;
                p{
                    position: relative;
                    right: getvw(10);
                }
                img{
                    width: getvw(25);
                    height: getvw(26);
                }
            }
        }
        .navone{
            width: getvw(708);
            height: getvw(105);
            // background-color: pink;
            display: flex;
            margin: 0 auto;
            justify-content:space-between ;
            .left{
                display: flex;
                align-items: center;
                font-size: getvw(29);
                p{
                    font-family: "微软雅黑";
                    position: relative;
                    left: getvw(10);
                    
                }
                .yundong{
                    width: getvw(47);
                    height: getvw(58);
                }
                .dianying{
                    width: getvw(71);
                    height: getvw(74);
                }
                img{
                    width: getvw(54);
                    height: getvw(42);
                    
                }
            }
            .right{
                display: flex;
                align-items: center;
                font-size: .32rem;
                p{
                    position: relative;
                    right: getvw(10);
                }
                img{
                    width: getvw(25);
                    height: getvw(26);
                }
            }
        }
        .navtwo{
            width: getvw(708);
            height: getvw(105);
            // background-color: pink;
            display: flex;
            margin: 0 auto;
            justify-content:space-between ;
            .left{
                display: flex;
                align-items: center;
                font-size: getvw(29);
                p{
                    font-family: "微软雅黑";
                    position: relative;
                    right: getvw(5);
                    
                }
                .yundong{
                    width: getvw(47);
                    height: getvw(58);
                }
                .dianying{
                    width: getvw(94);
                    height: getvw(58);
                }
                img{
                    width: getvw(54);
                    height: getvw(42);
                    
                }
            }
            .right{
                display: flex;
                align-items: center;
                font-size: .32rem;
                p{
                    position: relative;
                    right: getvw(10);
                }
                img{
                    width: getvw(25);
                    height: getvw(26);
                }
            }
        }
        .navtree{
            width: getvw(708);
            height: getvw(105);
            // background-color: pink;
            display: flex;
            margin: 0 auto;
            justify-content:space-between ;
            .left{
                display: flex;
                align-items: center;
                font-size: getvw(29);
                p{
                    font-family: "微软雅黑";
                    position: relative;
                    left: getvw(10);
                    
                }
                .yundong{
                    width: getvw(47);
                    height: getvw(58);
                }
                .dianying{
                    width: getvw(59);
                    height: getvw(59);
                }
                img{
                    width: getvw(54);
                    height: getvw(42);
                    
                }
            }
            .right{
                display: flex;
                align-items: center;
                font-size: .32rem;
                p{
                    position: relative;
                    right: getvw(10);
                }
                img{
                    width: getvw(25);
                    height: getvw(26);
                }
            }
        }
        .navfour{
            width: getvw(708);
            height: getvw(105);
            // background-color: pink;
            display: flex;
            margin: 0 auto;
            justify-content:space-between ;
            margin-top: getvw(29);
            .left{
                display: flex;
                align-items: center;
                font-size: getvw(29);
                p{
                    font-family: "微软雅黑";
                    position: relative;
                    left: getvw(10);
                    
                }
                .yundong{
                    width: getvw(47);
                    height: getvw(58);
                }
                .dianying{
                    width: getvw(78);
                    height: getvw(79);
                }
                img{
                    width: getvw(54);
                    height: getvw(42);
                    
                }
            }
            .right{
                display: flex;
                align-items: center;
                font-size: .32rem;
                p{
                    position: relative;
                    right: getvw(10);
                }
                img{
                    width: getvw(25);
                    height: getvw(26);
                }
            }
        }
        .navfive{
            width: getvw(708);
            height: getvw(105);
            // background-color: pink;
            display: flex;
            margin: 0 auto;
            justify-content:space-between ;
            .left{
                display: flex;
                align-items: center;
                font-size: getvw(29);
                p{
                    font-family: "微软雅黑";
                    position: relative;
                    left: getvw(10);
                    
                }
                .yundong{
                    width: getvw(47);
                    height: getvw(58);
                }
                .dianying{
                    width: getvw(84);
                    height: getvw(59);
                }
                img{
                    width: getvw(54);
                    height: getvw(42);
                    
                }
            }
            .right{
                display: flex;
                align-items: center;
                font-size: .32rem;
                p{
                    position: relative;
                    right: getvw(10);
                }
                img{
                    width: getvw(25);
                    height: getvw(26);
                }
            }
        }
        .navsix{
            width: getvw(538);
            height: getvw(76);
            // background-color: pink;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            button{
                border-radius: getvw(30);
                width: getvw(147);
                height: getvw(76);
                border: none;
                background-color: #ff9344;
                color: #fff;
            }
        }
    }
    footer{ 
        width: 100%;
        position: fixed;
        background-color: #fff;
        .box{
            width: getvw(652);
            height: getvw(107);
            margin: 0 auto;
            margin-top: getvw(50);
            // background-color: pink;
            display: flex;
            justify-content: space-between;
            .boxone{
                width: getvw(73);
                height: getvw(100);
                a{
                    color: #000;
                    text-decoration: none;
                }
                i{
                    
                    color: #ff9344;
                    font-size: getvw(73);
                }
                p{
                    font-size: .3467rem;
                    position: relative;
                    bottom: getvw(15);
                    left: getvw(10);
                }
            }
            
        }
    }
}